import { useState } from "react";
import GpuCanvas from "../../components/GpuCanvas";
import DatGui, { DatNumber } from "react-dat-gui";
export default function ComputeBoidSample() {
  const appName = "ComputeBoids";
  const [selectedData, setSelectedData] = useState({
    deltaT: 0.04,
    rule1Distance: 0.1,
    rule2Distance: 0.025,
    rule3Distance: 0.025,
    rule1Scale: 0.02,
    rule2Scale: 0.05,
    rule3Scale: 0.005,
  });
  return (
    <div style={{
        width: '100%',
        height: '100%'
    }}>
      <GpuCanvas app={appName} data={selectedData}/>
      <DatGui data={selectedData} onUpdate={setSelectedData}>
        <DatNumber path="deltaT" min={0.01} max={1} step={0.01} />
        <DatNumber path="rule1Distance" min={0.1} max={1} step={0.1} />
        <DatNumber path="rule2Distance" min={0.025} max={1} step={0.01} />
        <DatNumber path="rule3Distance" min={0.025} max={1} step={0.01} />
        <DatNumber path="rule1Scale" min={0.02} max={1} step={0.01} />
        <DatNumber path="rule2Scale" min={0.02} max={1} step={0.01} />
        <DatNumber path="rule3Scale" min={0.005} max={1} step={0.001} />
      </DatGui>
    </div>
  );
}
